﻿<!DOCTYPE html>
<html>
	<head>
		<title>模块列表</title>
    $css()
    <style type="text/css">
      #properties{padding:0 0 20px 0;}
      #properties h2{font-size:12px;background:#f0f0f0;padding:5px 12px;}
      #properties p{margin-left:10px;clear:both;}
      span.add{position:absolute;top:7px;left:210px;}
      #h1{padding:0 20px;}
      .topbar{height:25px;line-height:25px;margin:10px 0 0;background:#f0f0f0;}
      .topbar span{display:block;float:left;text-align:center;}
      .tb_normal{width:auto;}
      .s{display:block;float:left;text-align:center;}
      .s1{width:80px;}
      .s2{width:150px;}
      .s3{width:150px;}
      .s4{width:250px;}
      .s1 input{width:70px;}
      .s2 input{width:150px;}
      .s4 input{width:200px;}
      .control{padding:0 10px;}
      .validator{display:none;}
    </style>
	</head>
	<body>

  
    
    <div id="h1" style="overflow-y:auto;">
    <div class="topbar">
      <span class="s2">属性名称</span>
      <span class="s3">UI类型</span>
      <span class="s4">默认值</span>
      <span class="s4">状态</span>
    </div>
    <form method="post">
    <div id="properties">
      <script type="text/template" id="tpl">
          <input type="hidden" name="exist_$i" value="$v_exist"/>
          <input type="hidden" name="attrID_$i" value="$v_attrID"/>
          <span class="s s1"><input type="text" name="attrName_$i" value="$v_attrName" class="ui-validate tb_normal" required="true"/></span>
          <span class="s s2">&nbsp; <select name="attrType_$i" class="tb_normal" style="width:135px"><option value="1">输入框(默认)</option>
          <!--<option value="1">下拉选框</option>
          <option value="1">勾选按钮</option>-->
          <option value="5">一文件上传</option>
          </select></span>
	        <span class="s s3"><input name="attrVal_$i" value="$v_attrVal" class="tb_normal"/></span>
          <span class="s s4"><input type="checkbox" name="enabled_$i" checked="$v_enabled" class="tb_normal"/></span>
	        <span class="s removeProperty">[&nbsp;<a href="javascript:;" onclick="removeProperty(this)">删除</a>&nbsp;]</span>
      </script>
	    
	    
	  </form>

</div>

	  <div class="control">
		<a class="btn" href="javascript:addProperty()" style="margin-right:5px">增加属性</a>&nbsp;&nbsp;
	    <a class="btn" href="javascript:;" onclick="submit()">保存</a>
	  </div>

$js()
    <script type="text/javascript">

      var propertiesElem = document.getElementById("properties");
      var propertyArray;
      var properIndex = 0;
      var tpl = cms.$('tpl').innerHTML;

      ${init}

      cms.$('h1').style.height = (document.documentElement.clientHeight - 30) + 'px';

      function addProperty() {
      var elem = document.createElement('P');

      if (arguments.length ==0) {
        var html = tpl.replace(/\$i/g, (++properIndex).toString());
        html = html.replace(/\$v_[a-zA-Z]+/g, '');
        elem.innerHTML = html;
      } else {
        //初始化数据
        var html = tpl.replace(/\$i/g, (++properIndex).toString());
        html = html.replace('$v_exist', 'yes').replace('$v_attrID',arguments[0]).replace('$v_attrName', arguments[1])
        .replace('$v_attrVal',arguments[3]).replace('$v_enabled', arguments[4]?'checked':'');
        elem.innerHTML = html;
        elem.getElementsByTagName('SELECT')[0].value = arguments[2];
      }

      propertiesElem.appendChild(elem);
      var ce = document.createElement('DIV');
      ce.style.cssText = 'clear:both;';
      propertiesElem.appendChild(ce);
      };

      function removeProperty(t) {
      propertiesElem.removeChild(t.parentNode.parentNode);
      }

      function tip(msg) {
      document.getElementById("msg").innerHTML = msg + "<br />";
        document.body.scrollTop = 0;
      };

      function submit() {
        if (cms.validator.validate()) {
          var data = cms.form.getData() + location.search.replace('?', '&');
          cms.xhr.post(location.href, data, function (x) {
            showMessageBox({ html: '设置成功!', autoClose: true }, function () {
              location.replace(location.href);
            });
          });
        } else {
        showMessageBox({ html: 'KEY和属性名称不能为空，请检查!', autoClose: true });
        }
      }

	  </script>
	</body>
</html>